<link rel="stylesheet" href="<%- Virtual_Path.Static %>main/css/pay.css"/>
<!-- cont -->
<div class="xiu-container">
    <div class="pay-wrap">
        <div class="col-main">
            <div class="pay-content">
                <div class="pay-title clearfix">
                    <h2 class="icon-title"></h2>
                </div>
                <div class="pay-banner" style="margin-bottom:20px;">
                    <a href="/activity/2016/firstpay" target="_blank">
                        <img src="<%- Virtual_Path.Static %>main/image/pay/shouchong.jpg" alt="">
                    </a>
                </div>
                <div class="pay-body">
                    <div class="pay-price-list">
                        <div class="pay-item clearfix">
                            <label class="item-title">充值金额：</label>
                            <ul class="price-list j-price-list" id="J_PriceList">
                                <li><label class="price-money" data-pay-price="10">10元</label></li>
                                <li class="on"><label class="price-money" data-pay-price="50">50元</label></li>
                                <li><label class="price-money" data-pay-price="100">100元</label></li>
                                <li><label class="price-money" data-pay-price="200">200元</label></li>
                                <li><label class="price-money" data-pay-price="300">300元</label></li>
                                <li><label class="price-money" data-pay-price="500">500元</label></li>
                                <li><label class="price-money" data-pay-price="800">800元</label></li>
                                <li><label class="price-money" data-pay-price="1000">1000元</label></li>
                                <li><label class="price-money" data-pay-price="2000">2000元</label></li>
                                <li><label class="price-money" data-pay-price="3000">3000元</label></li>
                                <li><label class="price-money" data-pay-price="5000">5000元</label></li>
                                <li><label class="price-money" data-pay-price="10000">10000元</label></li>
                                <li><label class="price-money" data-pay-price="20000">20000元</label></li>
                                <li><label class="price-money" data-pay-price="30000">30000元</label></li>
                                <li><label class="price-money" data-pay-price="50000">50000元</label></li>
                                <li><input type="text" id="J_PriceOtherVal" value="" placeholder="其他金额" class="price-money other-money"/></li>
                            </ul>
                        </div>
                    </div>
                    <div class="pay-item clearfix">
                        <label class="item-title">充值金额：</label>
                        <div id="js_pay_total" class="pay-total">
                            <strong><label class="price" id="J_XPayMoney">-</label>元</strong>
                            <span>(<label class="stars"><em id="J_XPayCoin">-</em>金币</label>)</span>
                        </div>
                    </div>
                    <div class="pay-item clearfix">
                        <label class="item-title">充值方式：</label>
                        <!-- start 充值方式-->
                        <div class="pay-tab">
                            <ul class="pay-tab-title" id="J_PayTab">
                                <li class="on" data-pay-type="22">支付宝</li>
                                <li data-pay-type="30">微信支付</li>
                                <!--<li data-pay-type="20">网上银行</li>-->
                                <!--<li data-pay-type="0">汇付宝</li>-->
                                <!--<li class="lastitem" data-pay-type="12">手机充值卡</li>-->
                            </ul>
                            <div class="pay-tab-con" id="J_PayCont">
                                <!-- 支付宝 -->
                                <div class="control-group clearfix control-group-active">
                                    <ul class="pay-options clearfix pay-bank-list unpay-options">
                                        <li class="on">
                                            <div class="pay-option">
                                                <span class="logopay bank-alipay">
                                                    <em>支付宝</em>
                                                </span>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="pay-alipay">
                                        <div class="checkbox-agreement">
                                            <input type="checkbox" class="checkbox" checked="checked">同意<a href="/agreement/coin" target="_blank">《全民秀网虚拟社区币服务协议》</a>
                                        </div>
                                        <div class="btn-pay-btn">
                                            <a class="btn-pay" id="J_Pay_Alipay" target="_blank">立即支付</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="control-group clearfix">
                                    <div class="wx-alipay">
                                        <ul class="pay-options clearfix pay-bank-list unpay-options">
                                            <li class="on">
                                                <div class="pay-option">
                                                    <span class="logopay bank-weixin">
                                                        <em>微信支付</em>
                                                    </span>
                                                </div>
                                            </li>
                                        </ul>

                                        <div class="checkbox-agreement">
                                            <input type="checkbox" class="checkbox" checked="checked">同意<a target="_blank" href="/agreement/coin">《全民秀网虚拟社区币服务协议》</a>
                                        </div>
                                        <div class="btn-pay-btn">
                                            <a class="btn-pay" id="J_WeChat_Pay">立即支付</a>
                                        </div>
                                    </div>
                                </div>

                                <!-- 网上银行-->
                                <!--<div class="control-group clearfix">-->
                                <!--<ul class="pay-options clearfix pay-bank-list" id="J_BankListCode">-->
                                <!--<li data-bank-code="001" class="on">-->
                                <!--<div title="工商银行" class="pay-option">-->
                                <!--<span class="logopay bank-icbc">-->
                                <!--<em>工商银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="002">-->
                                <!--<div title="招商银行" class="pay-option">-->
                                <!--<span class="logopay bank-zsyh">-->
                                <!--<em>招商银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="003">-->
                                <!--<div title="建设银行" class="pay-option">-->
                                <!--<span class="logopay bank-bocb">-->
                                <!--<em>建设银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="004">-->
                                <!--<div title="中国银行" class="pay-option">-->
                                <!--<span class="logopay bank-boc">-->
                                <!--<em>中国银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="005">-->
                                <!--<div title="农业银行" class="pay-option">-->
                                <!--<span class="logopay bank-abc">-->
                                <!--<em>农业银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="006">-->
                                <!--<div title="交通银行" class="pay-option">-->
                                <!--<span class="logopay bank-bojt">-->
                                <!--<em>交通银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="007">-->
                                <!--<div title="上海浦东发展银行" class="pay-option">-->
                                <!--<span class="logopay bank-pdfz">-->
                                <!--<em>上海浦东发展银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="008">-->
                                <!--<div title="广东发展银行" class="pay-option">-->
                                <!--<span class="logopay bank-gdfz">-->
                                <!--<em>广东发展银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="009">-->
                                <!--<div title="中信银行" class="pay-option">-->
                                <!--<span class="logopay bank-zxyh">-->
                                <!--<em>中信银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="010">-->
                                <!--<div class="pay-option">-->
                                <!--<span class="logopay bank-cog">-->
                                <!--<em>中国光大银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="011">-->
                                <!--<div title="兴业银行" class="pay-option">-->
                                <!--<span class="logopay bank-cib">-->
                                <!--<em>兴业银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="012">-->
                                <!--<div title="平安银行" class="pay-option">-->
                                <!--<span class="logopay bank-szfz">-->
                                <!--<em>平安银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="013">-->
                                <!--<div title="中国民生银行" class="pay-option">-->
                                <!--<span class="logopay bank-cmbc">-->
                                <!--<em>中国民生银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="014">-->
                                <!--<div title="华夏银行" class="pay-option">-->
                                <!--<span class="logopay bank-bohx">-->
                                <!--<em>华夏银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--<li data-bank-code="020">-->
                                <!--<div title="中国邮政储蓄银行" class="pay-option">-->
                                <!--<span class="logopay bank-post">-->
                                <!--<em>中国邮政储蓄银行</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--</ul>-->
                                <!--<div class="checkbox-agreement">-->
                                <!--<input type="checkbox" checked="checked" class="checkbox">同意<a target="_blank" href="/agreement/coin">《全民秀网虚拟社区币服务协议》</a>-->
                                <!--</div>-->
                                <!--<div class="btn-pay-btn">-->
                                <!--<a class="btn-pay" id="J_Banks_Pay">立即支付</a>-->
                                <!--</div>-->
                                <!--</div>-->

                                <!-- 汇付宝-->
                                <!--<div class="control-group clearfix">-->
                                <!--<ul class="pay-options clearfix pay-bank-list tenpay-options">-->
                                <!--<li class="on">-->
                                <!--<div class="pay-option">-->
                                <!--<span class="logopay logopay bank-huifubao">-->
                                <!--<em>汇付宝</em>-->
                                <!--</span>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--</ul>-->

                                <!--<div class="checkbox-agreement">-->
                                <!--<input type="checkbox" checked="checked" class="checkbox">同意<a target="_blank" href="/agreement/coin">《全民秀网虚拟社区币服务协议》</a>-->
                                <!--</div>-->
                                <!--<div class="btn-pay-btn">-->
                                <!--<a class="btn-pay" id="J_HeePay_Pay">立即支付</a>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!-- 手机充值卡-->
                                <!--<div class="control-group clearfix">-->
                                <!--<ul class="pay-options clearfix pay-bank-list unpay-options">-->
                                <!--<li class="on">-->
                                <!--<div class="pay-option">-->
                                <!--<span class="logopay bank-czcard">-->
                                <!--<em>手机充值卡</em>-->
                                <!--</span>-->
                                <!--<b class="pay-factorage"></b>-->
                                <!--</div>-->
                                <!--</li>-->
                                <!--</ul>-->
                                <!--<div class="checkbox-agreement">-->
                                <!--<input type="checkbox" class="checkbox" checked="checked">同意<a href="/agreement/coin" target="_blank">《全民秀网虚拟社区币服务协议》</a>-->
                                <!--</div>-->
                                <!--<div class="btn-pay-btn">-->
                                <!--<a class="btn-pay" id="J_Phone_Pay">立即支付</a>-->
                                <!--</div>-->
                                <!--</div>-->
                            </div>
                        </div>
                        <!--end 充值方式-->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-aside">
            <div class="help-content">
                <div class="aside-hd">
                    <h2 class="icon-title"></h2>
                </div>
                <div class="aside-bd">
                    <p class="coin">1元=10金币</p>
                    <p>金币是您在本平台消费的虚拟货币，您可以通过充值获得，也可手动添加充值金额。</p>
                    <h2>您可到直播间进行：</h2>
                    <ul class="help-list">
                        <li>送礼物</li>
                        <li>点歌</li>
                        <li>消费</li>
                        <li>与明星进行互动</li>
                        <li>可以帮自己升级</li>
                    </ul>
                    <h2>在线客服：</h2>
                    <p>
                        在线时间每天00：00~24：00
                    </p>
                    <p class="qqchat">
                        <a href="javascript:;" onclick="_MEIQIA('showPanel')" class="xykefu">联系客服</a>
                        <style>
                            .xykefu {
                                width: 90px;
                                height: 28px;
                                text-align: center;
                                line-height: 28px;
                                background-color: #f9379b;
                                color: #fff;
                                display: inline-block;
                                border-radius: 5px;
                            }
                        </style>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="xiupay-xbox-show">
    <div class="xbox-hd">
        <a href="javascript:;" class="closex"></a>
    </div>
    <div class="xbox-bd">
        <h2 class="title">请在新页面完成付款</h2>
        <div class="xbox-butotn">
            <button>确定完成</button>
            <button class="button-disable">付款遇到问题</button>
        </div>
    </div>
</div>

<script type="text/javascript">
  $(function () {
    var _Data = {
      price: 50,
      coin: 500,
      type: 22,
      code: null
    };
    //其它金额
    var _num = /^[0-9]*$/;
    //其它金额 计算
    $('#J_PriceOtherVal').focus(function () {
      $(this).parent().addClass("on").siblings().removeClass("on");
      return true;
    }).keyup(function () {
      if (!_StateData.IsLogin) {
        $.CommonMain.Login('In');
        return true;
      }
      price = $.trim($(this).val());//获取 金额
      if (!_num.test(price)) {
        $.CommonMain.Modal_Tip('请输入大于零的整数！', {Timeout: 2000});
        return;
      } else if (parseInt(price) < 1) {
        $.CommonMain.Modal_Tip('充值金额必须大于等于1！', {Timeout: 2000});
        return;
      } else {
        if (price == '') {
          price = 10;
        }
        price = parseInt(price);
        $("#J_XPayMoney").text(_Data.price);
        $("#J_XPayCoin").text(_Data.price * 10);
      }
    });
    $("#J_XPayMoney").text(_Data.price);
    $("#J_XPayCoin").text(_Data.coin);

    $("#J_PriceList").on("click", "li", function (e) {
      if ($(this).find("label").length > 0) {
        _Data.price = parseInt($(this).find("label").data("pay-price"));
      }
      $("#J_XPayMoney").text(_Data.price);
      $("#J_XPayCoin").text(_Data.price * 10);
      $(this).addClass("on").siblings().removeClass("on");
    });

    $("#J_PriceOtherVal").on('keyup', function (e) {
      _Data.price = parseInt($(this).val());
      $("#J_XPayMoney").text(_Data.price);
      $("#J_XPayCoin").text(_Data.price * 10);
    });

    $("#J_PayTab").on("click", "li", function (e) {
      _Data.type = $(this).data("pay-type");
      var index = $(this).index();
      $(this).addClass("on").siblings().removeClass("on");
      $("#J_PayCont .control-group").removeClass("control-group-active").eq(index).addClass("control-group-active");
    });

    $("#J_BankListCode").on("click", "li", function (e) {
      _Data.code = $(this).data("bank-code");
      $(this).addClass("on").siblings().removeClass("on");
    });

    $("#J_Pay_Alipay").on("click", function (e) {
      if (!$.CommonMain.LoginCheck()) return;
      $(this).attr('href', '/heepay/business.user-payorder?pay_type=' + _Data.type + '&pay_amt=' + _Data.price + '&pay_code=' + _Data.code);
    })
    $("#J_WeChat_Pay").on("click", function (e) {
      if (!$.CommonMain.LoginCheck()) return;
      $(this).attr('href', '/heepay/business.user-payorder?pay_type=' + _Data.type + '&pay_amt=' + _Data.price + '&pay_code=' + _Data.code);
    })
//    $("#J_Banks_Pay").on("click", function (e) {
//      if (!$.CommonMain.LoginCheck()) return;
//      $(this).attr('href', '/heepay/business.user-payorder?pay_type=' + _Data.type + '&pay_amt=' + _Data.price + '&pay_code=' + _Data.code);
//    })
//    $("#J_HeePay_Pay").on("click", function (e) {
//      if (!$.CommonMain.LoginCheck()) return;
//      $(this).attr('href', '/heepay/business.user-payorder?pay_type=' + _Data.type + '&pay_amt=' + _Data.price + '&pay_code=' + _Data.code);
//    })
//    $("#J_Phone_Pay").on("click", function (e) {
//      if (!$.CommonMain.LoginCheck()) return;
//      $(this).attr('href', '/heepay/business.user-payorder?pay_type=' + _Data.type + '&pay_amt=' + _Data.price + '&pay_code=' + _Data.code);
//    })
  })
</script>

